<template>
  <div class="shop">
    <div class="head">
      <van-nav-bar title="商场"/>
    </div>
    <van-tabs v-model="active" swipe-threshold="5" animated>
      <van-tab title="全部商品">
        <detal-shop ref="shop11" @newprice='getNewprice' :active="active" />
      </van-tab>
      <van-tab v-for="(item,index) of tags" :key="index" :title="item.name">
        <detal-shop :active="active" :id="item.id"  @newprice='getNewprice'/>
      </van-tab>
    </van-tabs>
    <div class="btom">
      <van-submit-bar class="btom1"  :price="price" :decimal-length = '0' button-text="提交订单" @submit="onSubmit">
      </van-submit-bar>
      <van-popup v-model="show" position="bottom" :style="{ width: '100%', height: '60%' }">
        <van-password-input
          :value="value"
          :error-info="errorInfo"
          :show="showKeyboard1"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
          v-model="value"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
      </van-popup>
      <van-popup v-model="show1" :style="{ width: '20%', height: '10%' }">
        <van-loading size="50px" />
      </van-popup>
      <buttom-Tabbar />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getTags, getAllItem } from '../../rapper/shop/shop'
import { GoodsAction, GoodsActionIcon, GoodsActionButton, Card, NavBar, button, Tab, Tabs, SubmitBar, Toast, Popup, Loading, PasswordInput, NumberKeyboard } from 'vant'
import ButtomTabbar from '../../components/ButtomTabbar'
import Detalshop from '../../components/Detalshop.vue'
Vue.use(GoodsAction).use(GoodsActionButton).use(GoodsActionIcon).use(Card).use(NavBar).use(button).use(Tab).use(Tabs).use(SubmitBar).use(Toast).use(Popup).use(Loading).use(PasswordInput).use(NumberKeyboard)
export default{
  name: 'Shop',
  components: {
    'buttom-Tabbar': ButtomTabbar,
    'detal-shop': Detalshop
  },
  data () {
    return {
      checked: true,
      value: '',
      errorInfo: '',
      show: false,
      show1: false,
      showKeyboard: false,
      showKeyboard1: false,
      active: 0,
      tags: [],
      price: 0,
      itemList: []
    }
  },
  created () {
    this.getTags()
    this.getAllItem()
  },
  methods: {
    async getTags () {
      const res = await getTags()
      this.tags = res.data
    },
    async getAllItem () {
      const res = await getAllItem()
      this.itemList = res.data
      for (let item of res.data) {
        this.price += parseInt(item.price * item.num)
      }
      this.price *= 100
    },
    getNewprice (data, data1) {
      this.itemList[data1].num = 0
      this.price += (this.itemList[data1].num + data) * this.itemList[data1].price * 100
    },
    onSubmit () {
      this.show = true
      this.showKeyboard1 = true
      this.showKeyboard = true
      this.value = ''
      this.errorInfo = ''
    }
  },
  watch: {
    value (value) {
      if (value.length === 6 && value !== '123456') {
        this.errorInfo = '密码错误'
        this.value = ''
      } else if (value.length === 6 && value === '123456') {
        this.show = false
        this.show1 = true
        setTimeout(() => {
          this.show1 = false
          this.dian = 0
          this.guanli = 0
          this.shui = 0
          Toast.success('支付成功')
          this.$refs.shop11.childmethod()
          this.price = 0
        }, 2000)
      } else if (value.length === 1 && this.errorInfo === '密码错误') {
        this.errorInfo = ''
      }
    }
  }
}

</script>

<style scoped>
.btom1{
  margin-bottom: 50px;
}
</style>
